<template>
  <view class="wrapForm">
    <mescroll-uni
      class="lisBox"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
      :bottombar="false"
      :top="20"
    >
      <view
        class="flex flex-v alg-center jst-center"
        style="padding-bottom: 140rpx"
      >
        <view
          v-for="(item, index) in list"
          :key="item.id"
          class="jobCard"
          @click="toDetail(item)"
        >
          <view class="flex alg-center"
            ><view style="flex: 1" class="font16 bold u-3">
              {{ item.name }}
            </view>
            <view class="tagStatus">已开票</view>
          </view>

          <view class="line"></view>
          <view class="flex uPalce-grey font13"
            >开票公司：<view class="u_balck font13 mL5">{{
              item.sellerName
            }}</view></view
          >
          <view class="flex uPalce-grey font13 mT10"
            >支付金额：<view class="u_balck font13 mL5"
              >￥{{ item.money }}</view
            ></view
          >
          <view class="flex uPalce-grey font13 mT10"
            >支付时间：<view class="font13 mL5">{{ item.payTime }}</view></view
          >
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { findBillPage } from "@/api/companyInterface/user.js";
export default {
  mixins: [MescrollMixin],

  data() {
    return {
      downOption: {
        use: true,
        auto: false,
      },
      query: {
        pageSize: 10,
        pageNo: 1,
      },
      upOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        empty: {
          use: true,
          icon: "/static/image/nodata.png",
          tip: "暂无数据",
          fixed: true,
        },
        textNoMore: "到底啦~",
      },
      list: [],
      companyId: "",
    };
  },
  async onLoad(e) {
    let userInfo = this.xf.onlineUtils.getUserInfo();
    this.companyId = userInfo.companyId;
  },
  onShow(e) {
    this.mescroll && this.mescroll.triggerDownScroll();
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url: "/pages/common/invoice/detail/index?id=" + item.invoicId,
      });
    },
    async upCallback(page) {
      if (page.num == 1) this.list = [];
      this.query.pageNo = page.num;

      findBillPage({ ...this.query })
        .then((res) => {
          const { result } = res;
          let list = result?.records?.filter(
            (item) => item.isInvoice == 1
          );
          this.list = this.list.concat(list);

          this.mescroll.endSuccess(this.list.length);
        })
        .catch((err) => {
          this.mescroll.endByPage(0, 0);
          this.mescroll.endSuccess(0);
          this.mescroll.endErr();
        });
    },
  },
};
</script>
<style lang="scss">
page {
  min-height: 100%;
  background: linear-gradient(0deg, #f8faff, #f7f8fb);
}
</style>
<style lang="scss" scoped>
.wrapForm {
  height: 100%;
  .jobCard {
    width: calc(100% - 60rpx) !important;
    padding: 37rpx 31rpx 39rpx 32rpx;
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    .line {
      width: 100%;
      height: 2rpx;
      margin: 26rpx 0 32rpx 0;
      background: #f2f4fa;
    }
    .tagStatus {
      width: 77rpx;
      margin-left: 55rpx;
      font-size: 26rpx;
      color: #386aff;
    }
  }
}
</style>
